<template>
  <div class='indexwrap' ref='cmdlist' >
    <div class='top'>
        <!-- 首页搜索框跳转 -->
        <header>
            <div class='headerleft'>
                <span class="iconfont icon-a"></span>
                <span class="iconfont icon-niao"></span>
            </div>
            <div class='headercenter' @click='tosearch'>
                <span class="iconfont icon-fangdajing"></span>
                <div>搜索更多家具好物</div>
            </div>
            <div class="headerright">
                <span class="iconfont icon-icon-test"></span>
            </div>

        </header>
        
        <!-- 导航栏 -->
        <van-tabs title-active-color='red' title-inactive-color='black'  router>
            <van-tab   v-for="(item,index) in arr" :key='index' :title="item.title" :to='item.to'>
            </van-tab>
        </van-tabs>
    </div>

    <!-- 主页在此切换 -->
     <router-view></router-view>

            <!-- 悬浮球 -->
            <div class="circle" v-if='scrollTag'>
                <span class="iconfont icon-huidingbu"></span>
            </div>
            <div class="circle2">
                <span class="iconfont icon-gift"></span>
                月礼
            </div>
  </div>
</template>

<script>
import indexart from '../Indextab/indexarticle.vue'
export default {
    data() {
        return {
            arr:[{title:"首页",to:'/indexart'},{title:'出行',to:'/walk'},{title:'睡眠',to:'/sleep'},{title:'美食',to:'/cook'},{title:'美护',to:'/dress'},{title:'休闲',to:'/free'},{title:'儿童',to:'/child'},{title:'家务',to:'/housework'},{title:'空间',to:'/size'}],
            cmdlist:'',
            scrollTag:false
            
        }
    },
    methods:{
        change(){
            
        },
        tosearch(){
            this.$router.push('/indexsearch')
        }
        
    },
    components:{
        indexart
    },
    mounted(){
        
        
    }
}
</script>

<style lang='stylus'>
    .indexwrap{
        width 100% 
        height 100%
        padding-bottom 50px
        .top{
            width 100%
            position fixed
            z-index 10
            header{
                
                height 45px
                display flex
                align-items  center
                background-color #fff  
                .headerleft{
                    width: 25px;
                    height: 23px;
                    margin-left 13px
                    display flex
                    justify-content  center
                    align-items center
                    
                    position relative
                    .icon-a{
                        font-size 24px
                        font-weight border
                        
                    }
                    .icon-niao{
                        position absolute
                        font-size: 6px
                        top 0px
                        right 0px
                        transform :rotateY(180deg)
                    }
                }
                .headercenter{
                    width 270px
                    height 26px
                    border 2px solid #c6c6c6
                    border-radius 2px
                    margin-left 17px
                    display flex
                    align-items center
                    .icon-fangdajing{
                        font-size 14px
                        margin-left  8px                    
                        
                        color #c6c6c6
                    }
                    div{
                        width: 80px;
                        
                        font-size: 9px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color #c6c6c6
                        margin-left 10px
                        
                    }
                    
                }
                .headerright{
                    width 34px
                    height 27px
                    color #8D8C9D
                    margin-left 18px

                    dispaly flex
                    align-items center
                    justify-content center
                    .icon-icon-test{
                        font-size 26px
                        margin-bottom 5px
                    }
                }
            }
            .van-tabs{           
                background-color #fff
                .van-tab{
                    width 50px
                    height 39px
                    margin-right 3px
                    list-style none
                    display flex
                    justify-content center
                    align-items center                
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #1A1A1A;
                }
            }
        }   
        
        
        .circle{
                width 30px
                height 30px
                border-radius 100%
                position fixed
                right 10px
                bottom 110px
                background-color pink
                display flex
                justify-content center
                align-item center
                font-size 30px
                line-height 30px
                text-align center
                background-color rgba(255,255,255,0.5)
                color #aaa
                border 1px solid #aaa
        }
        .circle2{
                width 30px
                height 30px
                border-radius 100%
                position fixed
                right 10px
                bottom 70px
                background-color rgba(85,85,85,0.7)
                display flex
                justify-content center
                align-item center
                flex-direction column
                font-size 4px
                color #fff
                text-align center
        }
        
    }
    
    
    
</style>